<template>
    <div class="setting">
        <el-header>
            <div class="drop-box">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        个性化设置-形象<i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="font">
                            <router-link :to="{ name: 'SetFont' }" tag="li">个性化设置-字体</router-link>
                        </el-dropdown-item>
                        <el-dropdown-item command="theme">
                            <router-link :to="{ name: 'SetTopic' }" tag="li">个性化设置-主题</router-link>
                        </el-dropdown-item>

                        <el-dropdown-item command="background">
                            <router-link :to="{ name: 'Setting' }" tag="li">个性化设置-背景</router-link>
                        </el-dropdown-item>
                        
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            
        </el-header>
        <el-main>
            <el-tabs v-model="activeName">
                <el-tab-pane label="仪表" name="meter">
                    <set-meter-portrait></set-meter-portrait>
                </el-tab-pane>
                <el-tab-pane label="中控" name="control">
                    <set-control-portrait></set-control-portrait>
                </el-tab-pane>
                <el-tab-pane label="手机" name="mobile">
                    <set-mobile-portrait></set-mobile-portrait>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <router-view></router-view>
    </div>
</template>

<script>
import SetMeterPortrait from './components/SetMeterPortrait'
import SetControlPortrait from './components/SetControlPortrait'
import SetMobilePortrait from './components/SetMobilePortrait'
export default {
    name: 'SetPortrait',
    data() {
        return {
            activeName: 'meter',
            selected: true,
            checkAll: false
        }
    },
    methods: {
        handleCommand(){

        },
    },
    components: {
        SetMeterPortrait,
        SetControlPortrait,
        SetMobilePortrait
    }
}
</script>

<style lang="scss" scoped>
.setting{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 23;
    .el-header{
        height: 50px !important;
        line-height: 50px;
    }
    
}
.el-dropdown{
    font-size: 16px;
    font-weight: bold;
    color: #333;
    .el-icon-caret-bottom{
        padding-left: 8px;
    }
}
.el-dropdown-menu{
    top: 92px !important;
    padding: 0;
    margin: 0;
    left: 220px !important;
    padding-top: 10px;
    .el-dropdown-menu__item{
        font-size: 14px;
    }
}
</style>

